<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器</title>
	</head>
	<body>
		<div id="app" >
			<!-- 展现数组 -->
			<span v-for="item in array">{{item}}</span>
			<!-- 添加数据 -->
			<br />
			数据:<input type="text" v-model="num" /><br />
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="unshift">unshift</button>
			<button @click="splice">splice</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app =new Vue({
				el:"#app",
				data:{	
					//定义数组
					array:[1,3,7,5,6],
					num:''
				},
				methods:{
					push(){
						this.array.push(this.num )
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.num)
					},
					splice(){
						/* 需求1:将第一位的数据1替换为5 
							第一位:下标值
							第二位: 修改数量
							*/
						//this.array.splice(0,1,5) 
						/* 将前两位数据,换为8,9 */
						//this.array.splice(0,2,8,9)
						/* 需求3:删除第四个元素 */
						this.array.splice(3,1)
					}
				}
				
			})
		</script>
	</body>
</html>
